<script setup>
// 假设我们有四个人的信息
const people = [
  {
    name: '张三',
    title: '前端开发工程师',
    description: '张三是一位经验丰富的前端开发工程师，擅长使用Vue.js和React.js。他在多个项目中发挥了关键作用，帮助团队实现了高质量的用户界面。',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: '李四',
    title: '后端开发工程师',
    description: '李四是一位资深的后端开发工程师，专长于Node.js和Python。他对服务器架构和数据库设计有深入的理解，是团队中的技术骨干。',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: '王五',
    title: '产品设计师',
    description: '王五是一名才华横溢的产品设计师，专注于用户体验和交互设计。他的设计作品多次获得行业奖项，深受用户的喜爱。',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: '赵六',
    title: 'UI设计师',
    description: '赵六是一位专业的UI设计师，拥有出色的视觉设计能力。他擅长使用Photoshop和Figma等工具，为团队创造了美观且易于使用的界面设计。',
    image: 'https://via.placeholder.com/150'
  }
];
</script>

<template>
  <div class="about-container">
    <el-card>
      <h1>关于我们</h1>
    </el-card>
    <el-card>
      <div class="people-grid">
        <div v-for="(person, index) in people" :key="index" class="person-card">
          <img :src="person.image" :alt="person.name" class="person-image"/>
          <h2>{{ person.name }}</h2>
          <p class="person-title">{{ person.title }}</p>
          <p class="person-description">{{ person.description }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.about-container {
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.people-grid {
  min-height: 50vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.person-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s;
}

.person-card:hover {
  transform: translateY(-10px);
}

.person-image {
  width: 100%;
  height: auto;
}

.person-card h2 {
  margin: 10px 0;
  font-size: 24px;
  color: #333;
}

.person-title {
  font-size: 18px;
  color: #666;
  margin-bottom: 10px;
}

.person-description {
  font-size: 16px;
  color: #999;
  padding: 0 10px;
}
</style>
